<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>私信</title>
    <div th:replace="commonPage::comLink"></div>
</head>
<body>
<div th:replace="commonPage::#loader"></div>
<div th:replace="commonPage::comIndexHeaderMune"></div>


<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 chat-list-padding">

    <div class="left-menu">
        <div class="chat-list invisible-scrollbar">
            <span style="line-height: 50px" class="background"> 会话列表 </span>
            <ul>
                <li th:each="item : ${chatLists}"
                    th:class="${receiveUserName == item.chatList.others}? 'background chat-item':'chat-item'">
                    <a th:href="@{'/userCenter/communicate/'+${item.chatList.others}}">
                        <span class="badge "  th:if="${item.chatList.msgCount>0}"
                              style="background-color: orangered;" >[[${item.chatList.msgCount}]]</span>
                        <img th:src="${item.others.imgUrl}" class="chat-img">
                        <span  class="chat-user">
                            [[${item.others.name}]]
                        </span>
                    </a>
                    <span class="chat-time"
                          th:text="${#dates.format(item.chatList.lastReplyTime,'yyyy-MM-dd HH:mm')}">
                    </span>
                </li>
            </ul>
        </div>
    </div>
</div>


<!--     通知表单    -->

<span th:if="${receiveUserName}!=null" id="receiveUserName" class="hidden" th:value="${receiveUserName}"
onload="commun()"></span>

<section class="contact-area padding-top-140px padding-bottom-120px">

    <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="user-center"><a th:href="@{/userCenter}">个人信息</a></li>
        <li role="presentation" class="user-center"><a th:href="@{/userCenter/notices}">通 知</a></li>
        <li role="presentation" class="active"><a href="#">私 信</a></li>
    </ul>
    <div class="container">
        <div class="row">
            <div class="">
                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 mx-auto">
                    <div class="communicate-form">
                        <span th:if="${chat}== 'noChat'">您还未选中或者发起聊天，快去跟好友聊一聊吧！</span>
                        <span th:if="${chat}== 'noUser'">用户不存在哦，请选择跟其他好友聊聊吧！</span>
                        <div id="chat__area" class="chat-show invisible-scrollbar" >
                            <!--                            遍历所有消息-->
                        </div>


<!--                        输入框-->
                           <div th:if="${receiveUserName}!=null" id="chat__form" class="padding-top-30px">
                                <textarea id="chat__content" name="chatContent" class="form-control"
                                          placeholder="给对方打个招呼吧！" cols="20" rows="8"></textarea>
                            <br>
                            <button type="submit" onclick="sendMsgs()"  id="content_submit"
                                    class="btn btn-info btn-primary btn-right">提交
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div th:replace="commonPage::comFooter">
</div>
<div th:replace="commonPage::comScript">
</div>
<script th:inline="javascript">
    var url = window.location.href;
    var index = url.lastIndexOf("\/");
    str = url.substring(index + 1,url.length);
    var receiveName = [[${receiveUserName}]];
    if (str == receiveName){
            var others = receiveName;
            var totol;
            var chatArea = $("#chat__area");
            var time = 0;
            $.ajax({
                type: "get",
                url: "/userCenter/chat/" + others,
                dataType: "json",
                success: function (data) {

                    chatArea.html("");

                    data = JSON.stringify(data);
                    var jsonData = JSON.parse(data);
                    totol = jsonData.length;
                    for (var i = 0; i < totol; i++) {
                        var msg = jsonData[i];
                        var sender = msg.sender.userName;
                        var imgUrl = msg.sender.imgUrl;
                        var content = msg.message.content;
                        var div_class;
                        var img_class;
                        var msg_time = msg.message.gmtCreate;
                        if (msg_time - time > 60000) {
                            time = msg_time;
                            msg_time = new Date(msg_time).toLocaleString().replace(/:\d{1,2}$/, ' ');
                        } else {
                            msg_time = "";
                        }
                        if (sender != others) {
                            //如果我是发送者
                            div_class = "sender";
                            img_class = "reply-img";
                        } else {
                            div_class = "receiver";
                            img_class = "receiver-img";
                        }
                        var message = "<br style=\"line-height: 60px\">" +
                            "<p style='text-align: center'>"
                            + msg_time
                            + "</p>" +
                            "<div class=\"msg-div\">" +
                            "<div class=" + div_class + ">" +
                            "<img src= "
                            + imgUrl +
                            "  class=" + img_class + ">" +
                            "<div class=\"content-msg\">"
                            + content +
                            "</div>" +
                            "</div></div>";
                        chatArea.append(message);
                        chatArea.scrollTop(9999);
                    }
                },
                error: function () {
                    alert("错误 ")
                }
            })
            setInterval(function () {
                var times = 0;
                $.ajax({
                    type: "get",
                    url: "/userCenter/chat/" + others,
                    dataType: "json",
                    success: function (data) {
                        data = JSON.stringify(data);
                        var times = 0;
                        var jsonData = JSON.parse(data);
                        var newTotal = jsonData.length;
                        if (newTotal == totol) {
                            console.log("无新消息");
                        } else {
                            chatArea.html("");
                            totol = newTotal;
                            for (var i = 0; i < totol; i++) {
                                var msg = jsonData[i];
                                var sender = msg.sender.userName;
                                var imgUrl = msg.sender.imgUrl;
                                var content = msg.message.content;
                                var div_class;
                                var img_class;
                                var msg_time = msg.message.gmtCreate;
                                if (msg_time - times > 60000) {
                                    times = msg_time;
                                    msg_time = new Date(msg_time).toLocaleString().replace(/:\d{1,2}$/, ' ');
                                } else {
                                    msg_time = "";
                                }
                                if (sender != others) {
                                    //如果我是发送者
                                    div_class = "sender";
                                    img_class = "reply-img";
                                } else {
                                    div_class = "receiver";
                                    img_class = "receiver-img";
                                }
                                console.log(img_class);
                                var message = "<br style=\"line-height: 60px\">" +
                                    "<p style='text-align: center'>"
                                    + msg_time
                                    + "</p>" +
                                    "<div class=\"msg-div\">" +
                                    "<div class=" + div_class + ">" +
                                    "<img src= "
                                    + imgUrl +
                                    "  class=" + img_class + ">" +
                                    "<div class=\"content-msg\">"
                                    + content +
                                    "</div>" +
                                    "</div></div>";
                                $("#chat__area").append(message);
                                $("#chat__area").scrollTop(9999);
                            }
                        }
                    },
                    error: function () {
                        alert("错误 ")
                    }
                })
            }, 1000);


    }
    function sendMsgs() {
        var chatContent =$("#chat__content");

        var content = chatContent.val();
        if (content.match(/^[ ]*$/)){
            chatContent.val('');
            return false;
        }
        $.ajax({
            type: "post",
            url: "/chat/" + receiveName,
            data:{
                "content": content
            },
            async:false,
            dataType: "text",
            success:function (data) {
                chatContent.val('');
                // var jsonData = JSON.stringify(data);
                // var msg1 = jsonData.message;
                // alert(msg1.val());
                // var msgContent = msg1.content;
                // var sender1 = jsonData.sender;
                // var msg_time = jsonData.gmtCreate;
                // msg_time = new Date(msg_time).toLocaleString().replace(/:\d{1,2}$/, ' ');
                // var imgUrl = sender1.imgUrl;
                // var div_class = "sender";
                // var img_class = "reply-img";
                // var message = "<br style=\"line-height: 60px\">" +
                //     "<p style='text-align: center'>"
                //     + msg_time
                //     + "</p>" +
                //     "<div class=\"msg-div\">"
                // "<div class=" + div_class + ">" +
                // "<img src= "
                // + imgUrl +
                // "  class=" + img_class + ">" +
                // "<div class=\"content-msg\">"
                // + msgContent +
                // "</div>" +
                // "</div></div>";
                // chatArea.append(message);
                // chatArea.scrollTop(9999);
            },
            error:function (data) {
                data = JSON.stringify(data);
                alert("failed " + data);
            }
        })
    }


</script>
</body>
</html>